<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>user list</title>
<link media="all"
	href="https://a.alipayobjects.com/alice/one/1.2.2/one.css"
	rel="stylesheet" />
<style>
.wrapper {
	width: 990px;
	margin: 0 auto;
}

h1 {
	font-size: 26px;
}

.ui-grid-row {
	margin-bottom: 15px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="ui-grid-row">
			<div class="ui-grid-25"></div>
		</div>
		<div class="ui-grid-row">
			<div class="ui-grid-25">
				<div class="ui-nav">
					<ul class="ui-nav-main">
						<li class="ui-nav-item"><a href="#">一级导航 1</a>
							<ul class="ui-nav-submain">
								<li class="ui-nav-subitem ui-nav-subitem-current"><a
									href="#">二级导航 1-1</a></li>
								<li class="ui-nav-subitem"><a href="#">二级导航 1-2</a></li>
								<li class="ui-nav-subitem"><a href="#">二级导航 1-3</a></li>
							</ul></li>
						<li class="ui-nav-item ui-nav-item-current"><a href="#">一级导航
								2</a>
							<ul class="ui-nav-submain">
								<li class="ui-nav-subitem"><a href="#">二级导航 2-1</a></li>
								<li class="ui-nav-subitem ui-nav-subitem-current"><a
									href="#">二级导航 2-2</a></li>
								<li class="ui-nav-subitem"><a href="#">二级导航 2-3</a></li>
							</ul></li>
						<li class="ui-nav-item"><a href="#">一级导航 3</a>
							<ul class="ui-nav-submain">
								<li class="ui-nav-subitem"><a href="#">二级导航 3-1</a></li>
								<li class="ui-nav-subitem"><a href="#">二级导航 3-2</a></li>
								<li class="ui-nav-subitem ui-nav-subitem-current"><a
									href="#">二级导航 3-3</a></li>
							</ul></li>
						<li class="ui-nav-item"><a href="#">一级导航 4</a></li>
					</ul>
					<div class="ui-nav-subcontainer"></div>
				</div>
			</div>
		</div>
		<div class="ui-grid-row">
			<div class="ui-table-container">
				<table class="ui-table">
					<!-- 可以在class中加入ui-table-inbox或ui-table-noborder分别适应不同的情况 -->
					<thead>
						<tr>
							<th>id</th>
							<th>username</th>
							<th>password</th>
							<th>usertype</th>
							<th>enabled</th>
							<th>realname</th>
							<th>qq</th>
							<th>email</th>
							<th>telphone</th>
						</tr>
					</thead>
					<!-- 表头可选 -->
					<tbody>
						<tr th:each="user:${userlist}">
							<td th:text="${user.id}">Mark</td>
							<td th:text="${user.username}">Mark</td>
							<td th:text="${user.password}">Otto</td>
							<td th:text="${user.usertype}">@mdo</td>
							<td th:text="${user.enabled}">index</td>
							<td th:text="${user.realname}">index</td>
							<td th:text="${user.qq}">index</td>
							<td th:text="${user.email}">index</td>
							<td th:text="${user.tel}">index</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<table class="ui-table">
    <thead>
        <tr>
            <th width="10%">创建时间</th>
            <th width="20%">名称<em class="ft-bar">|</em>交易号</th>
            <th width="20%">对方</th>
            <th width="10%">金额<em class="ft-bar">|</em>明细</th>
            <th width="10%">状态</th>
            <th width="20%">操作</th>
            <th width="10%">备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>looooooooooooooooooong data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
</body>
</html>